<template>
	<view class="container">
		<!-- 	<view class="top-desc">
			以下均为严重违规账户：杀猪盘片子、涉嫌约炮卖淫色情等违规行为，均已被平台封号处理。请大家遵守平台规则，积极维护正能量分为，不要做越界的事情，谢谢支持！
		</view> -->
		<view class="blacklist">
			<view v-for="item in blackList" class="black-item">
				<view class="avator">
					<img :src="item.headImage" alt="">
				</view>
				<view class="info">
					<view class="nick-name">
						昵称：{{item.nickname}}
					</view>
					<view>
						封号时间：{{item.createTime|dateFilter}}
					</view>
					<view class="reason">
						<view>
							封号天数：{{item.duration}}天
						</view>
						<view>
							封号原因：{{item.reason}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	export default {
		data() {
			return {
				desc: '',
				blackList: []
			};
		},
		filters: {
			dateFilter(val) {
				if (val && val.includes('T')) {
					return val.split('T')[0]
				}
			}
		},
		mounted() {
			request(url.getBlockList, 'GET', {
				page: 1,
				limit: 100
			}).then(res => {
				if (res.status === 200) {
					this.blackList = res.data
				}
			})
		}
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.container {
		color: #666;
		box-sizing: border-box;
	}

	.top-desc {
		background: #fff;
		padding: 8px;
		text-align: justify;
	}

	.black-item {
		padding: 8px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		margin: 10px 0;
		width: 100%;
		color: #999;

		.avator {
			margin-right: 20px;
		}

		img {
			width: 65px;
			height: 65px;
			border-radius: 100px;
		}

		.nick-name {
			font-size: 16px;
			line-height: 20px;
			color: #111;
			font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
			margin-bottom: 5px;
		}

		.info {
			width: 100%;
		}

		.reason {
			display: flex;
			flex-direction: row;

			view {
				flex: 0 0 130px;
			}
		}
	}
</style>
